
import React from 'react';
import { Modal, Form, Input, Checkbox, DatePicker } from 'antd';
import dayjs from 'dayjs'

import { ReportType } from '../core/common'

class RenderDialog extends React.Component {
    constructor(props) {
        super(props);

        this.handleSubmit = this.handleSubmit.bind(this);
        this.onFinish = this.onFinish.bind(this);
        this.onFinishFailed = this.onFinishFailed.bind(this);
        this.setTimeRangeCustomed = this.setTimeRangeCustomed.bind(this);

        this.formRef = React.createRef();

        this.state = { time_range_customed: false };
    }

    handleSubmit() {
        this.formRef.current.submit();
    }
    onFinish(values) {
        console.log('Success:', values);

        const time_range_customed = this.state.time_range_customed;
        const userValues = { ...values, time_range_customed };
        if (time_range_customed) {
            userValues.begin = values.date_range[0];
            userValues.end = values.date_range[1];
            delete userValues.date_range;
        } else if (userValues.begin) {
            const begin = userValues.begin;
            const book_type = this.props.content.config.book_type;
            const reportType = ReportType.getByValue(book_type);
            userValues.begin = begin.startOf(reportType.timeUnit);
            userValues.end = userValues.begin.add(1, reportType.timeUnit);
        }

        const { report, content } = this.props;
        this.props.onComplete && this.props.onComplete(report, content, userValues);

    };
    onFinishFailed(errorInfo) {
        console.log('Failed:', errorInfo);
    };

    setTimeRangeCustomed(e) {
        this.setState({ time_range_customed: e.target.checked });
    }

    render() {
        const { content, open, onCancel } = this.props;
        const config = content && content.config;
        const book_type = config ? config.book_type : '';
        const input_username = config && config.input_username;
        const custom_time_range = config && config.custom_time_range;
        const initialValues = {
            begin: dayjs(),
        };
        const items = [];

        if (book_type !== 'REAL') {
            if (custom_time_range && this.state.time_range_customed) {
                items.push(
                    <Form.Item key="date_range"
                        label="时间范围"
                        name="date_range"
                        rules={[
                            {
                                required: true,
                            },
                        ]}>
                        <DatePicker.RangePicker
                            showTime
                            format="YYYY/MM/DD HH:mm"
                        />
                    </Form.Item>
                );
            } else {
                items.push(
                    <Form.Item key="begin"
                        label="时间"
                        name="begin"
                        rules={[
                            {
                                required: true,
                            },
                        ]}>
                        <DatePicker
                            picker={book_type === 'DAY' ? 'date' : book_type.toLowerCase()} />
                    </Form.Item>
                );
            }

            if (custom_time_range) {
                items.push(
                    <Form.Item key="time_range_customed"
                        label=" "
                        name="time_range_customed" >
                        <Checkbox
                            checked={this.state.time_range_customed}
                            onChange={this.setTimeRangeCustomed} >
                            自定义时间范围
                        </Checkbox>
                    </Form.Item>
                );
            }
        }

        if (input_username) {
            items.push(
                <Form.Item key="report_user"
                    label="制表用户"
                    name="report_user"
                    rules={[
                        {
                            required: true,
                        },
                    ]}>
                    <Input />
                </Form.Item>
            );
        }


        return (
            <Modal title="生成报表"
                open={open}
                zIndex={1020}
                onCancel={onCancel}
                onOk={this.handleSubmit}>
                <Form
                    colon={false}
                    labelCol={{ span: 4, }}
                    wrapperCol={{ span: 20, }}
                    ref={this.formRef}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    initialValues={initialValues}>
                    {items}
                </Form>

            </Modal>
        )
    }

    static isDialogEmpty(config) {
        const { book_type, input_username } = config;
        return book_type === 'REAL' && !input_username;
    }

    static defaultUserValues(config) {
        const userValues = { report_user: '' };

        const book_type = config.book_type;
        if (book_type === 'REAL') {
        } else {
            const begin = dayjs();
            const reportType = ReportType.getByValue(book_type);
            userValues.begin = begin.startOf(reportType.timeUnit);
            userValues.end = userValues.begin.add(1, reportType.timeUnit);
        }
        return userValues;
    }
}

export default RenderDialog